{% extends "admin/base.html" %}

{% block title %}路径管理 - 地标和路径管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800 page-title">路径管理</h1>
        <a href="/admin/routes/create" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> 添加路径
        </a>
    </div>

    <!-- 搜索和过滤区域 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control bg-light border-0 small" placeholder="搜索路径..." id="search-input">
                        <button class="btn btn-primary" type="button">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary active" id="view-table">
                            <i class="bi bi-table"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="view-card">
                            <i class="bi bi-grid"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 路径列表 -->
    <div id="routes-table-view">
        <div class="card">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">路径列表</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="routes-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>包含地标</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for route in routes %}
                            <tr>
                                <td>{{ route.id }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="ms-2">
                                            <div class="fw-bold">{{ route.name }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if route.landmarks %}
                                        <span class="badge bg-primary me-1">{{ route.landmarks|length }} 个地标</span>
                                        <button class="btn btn-sm btn-outline-info view-landmarks" data-route-id="{{ route.id }}">
                                            <i class="bi bi-eye"></i> 查看
                                        </button>
                                    {% else %}
                                        <span class="badge bg-secondary">无地标</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a href="/admin/routes/{{ route.id }}/edit" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <a href="/admin/routes/{{ route.id }}/delete" class="btn btn-sm btn-outline-danger"
                                           onclick="return confirm('确定要删除这条路径吗？');">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 卡片视图 -->
    <div id="routes-card-view" style="display: none;">
        <div class="row">
            {% for route in routes %}
            <div class="col-xl-4 col-md-6 mb-4 route-card">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">路径</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ route.name }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="bi bi-route-fill text-success fa-2x"></i>
                            </div>
                        </div>

                        <div class="mt-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    {% if route.landmarks %}
                                        <span class="badge bg-primary">{{ route.landmarks|length }} 个地标</span>
                                    {% else %}
                                        <span class="badge bg-secondary">无地标</span>
                                    {% endif %}
                                </div>
                                <button class="btn btn-sm btn-outline-info view-landmarks" data-route-id="{{ route.id }}">
                                    <i class="bi bi-eye"></i> 查看地标
                                </button>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">ID: {{ route.id }}</small>
                                <div class="btn-group">
                                    <a href="/admin/routes/{{ route.id }}/edit" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="/admin/routes/{{ route.id }}/delete" class="btn btn-sm btn-outline-danger"
                                       onclick="return confirm('确定要删除这条路径吗？');">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- 地标详情模态框 -->
<div class="modal fade" id="landmarksModal" tabindex="-1" aria-labelledby="landmarksModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="landmarksModalLabel">路径包含的地标</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="landmarks-modal-body">
                <!-- 地标信息将通过AJAX加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 视图切换
        $('#view-table').click(function() {
            $('#routes-table-view').show();
            $('#routes-card-view').hide();
            $(this).addClass('active');
            $('#view-card').removeClass('active');
        });

        $('#view-card').click(function() {
            $('#routes-table-view').hide();
            $('#routes-card-view').show();
            $(this).addClass('active');
            $('#view-table').removeClass('active');
        });

        // 搜索功能
        $('#search-input').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $("#routes-table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });

            $(".route-card").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });

        // 查看路径包含的地标
        $('.view-landmarks').click(function() {
            var routeId = $(this).data('route-id');
            var landmarksModal = new bootstrap.Modal(document.getElementById('landmarksModal'));

            // 获取路径详情
            $.ajax({
                url: '/api/routes/' + routeId + '/details',
                type: 'GET',
                success: function(data) {
                    var landmarksHtml = '';
                    if (data.landmarks && data.landmarks.length > 0) {
                        landmarksHtml = '<div class="list-group">';
                        data.landmarks.forEach(function(landmark, index) {
                            landmarksHtml += `
                                <div class="list-group-item">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">${index + 1}. ${landmark.name}</h6>
                                    </div>
                                    <p class="mb-1">${landmark.summary}</p>
                                    <small>坐标: ${landmark.lat}, ${landmark.lng}</small>
                                </div>
                            `;
                        });
                        landmarksHtml += '</div>';
                    } else {
                        landmarksHtml = '<div class="alert alert-warning">该路径不包含任何地标</div>';
                    }

                    $('#landmarks-modal-body').html(landmarksHtml);
                    landmarksModal.show();
                },
                error: function() {
                    $('#landmarks-modal-body').html('<div class="alert alert-danger">获取地标信息失败</div>');
                    landmarksModal.show();
                }
            });
        });
    });
</script>
{% endblock %}
